<template>
  <div>{{ info }}</div>
  <el-button @click="tellFather">通知父组件修改年龄</el-button>
  <div>Parent bound v-model is: {{ model }}</div>
  <button @click="update">Increment</button>
  <el-input type="number" v-model="model"></el-input>
</template>

<script lang="ts" setup>
import { withDefaults, watchEffect, computed } from 'vue'
import { ElMessage } from 'element-plus'
const props = withDefaults(defineProps<{
  name?: string;
  age?: number;
}>(), {
  name: '张三',
  age: 28
})
watchEffect(() => {
  ElMessage({
    message: props.age.toString(),
    type: 'success',
    plain: true
  })
})
const info = computed(() => `${props.name}:${props.age}`)

function test() {
  ElMessage({
    message: '这个方法暴露给外部使用',
    type: 'success',
    plain: false
  })
}
defineExpose({ test })

// const emit = defineEmits(['changeAge'])
const emit = defineEmits<{(e: 'changeAge', id: string): void}>()
function tellFather() {
  emit('changeAge', '中华人民共和国')
}

const model = defineModel<number | string>({ default: 0 })
function update() {
  model.value = Number(model.value) + 1
}

</script>

<style scoped lang="less">

</style>
